<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>Create New Invoice</title>
    <link href="/resources/bootstrap-3.2.0-dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="/resources/bootstrap-3.2.0-dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
    <link href="/resources/css/newInvoice.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<div th:fragment="nav_bar">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="/resources/bootstrap-3.2.0-dist/js/bootstrap.js"></script>
    <script type="text/javascript">
        (function () {
            var po = document.createElement('script');
            po.type = 'text/javascript';
            po.async = true;
            po.src = 'https://apis.google.com/js/client:plusone.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(po, s);
        })();
    </script>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand active" href="/">Home</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/newInvoice">New</a></li>
                    <li><a href="/viewInvoice">View</a></li>
                    <li><a href="/reports">Reports</a></li>
                    <li><a href="/settings">Settings</a></li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search"/>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <form class="navbar-form navbar-right">
                    <!-- <div class="form-group">
                       <input type="username" class="form-control" placeholder="username"/>
                   </div>
                   <div class="form-group">
                       <input type="password" class="form-control" placeholder="Password"/>
                   </div>
                   <button type="button" class="btn btn-default">Sign In</button>-->
                    <span id="signinButton">
                    <span class="g-signin"
                          data-callback="signinCallback"
                          data-clientid="561000103280-bsa6i80vln93pfpnhlqhjod6u3k8chse.apps.googleusercontent.com"
                          data-cookiepolicy="single_host_origin"
                          data-requestvisibleactions="http://schema.org/AddAction"
                          data-scope="https://www.googleapis.com/auth/plus.login">
                    </span></span>
                </form>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
</div>

<div th:fragment="footer">
    <div class="panel-footer"><p class="text-muted">Address: 226 Coral Keys Dr. N.E., Calgary, Alberta - T3J 3K6
        Contact: +1 (403) 973-6565 e-mail: <a href="mailto:a1partytent@gmail.com">a1partytent@gmail.com</a></p>
    </div>
</div>
</body>
</html>